<!--
 * @Description: tabbar
 * @Author: Kerwin
 * @Date: 2024-08-26 18:08:45
 * @LastEditTime: 2025-04-07 14:29:58
 * @LastEditors:  Please set LastEditors
-->

<template>
    <view class="tabbar">
        <view v-for="(item, index) in tabs" class="item" :class="{ active: tabIndex === index }"
            @click="handleClick(index)">
            <u-icon :name="tabIndex === index ? item.icon_on : item.icon" size="46"></u-icon>
            <view class="name">{{ item.name }}</view>
        </view>
    </view>
</template>
  
<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store'
import icon_message from '../../static/tabs/message.png'
import icon_message_on from '../../static/tabs/message_on.png'
import icon_contacts from '../../static/tabs/contacts.png'
import icon_contacts_on from '../../static/tabs/contacts_on.png'
import icon_discover from '../../static/tabs/discover.png'
import icon_discover_on from '../../static/tabs/discover_on.png'
import icon_mine from '../../static/tabs/mine.png'
import icon_mine_on from '../../static/tabs/mine_on.png'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const props = withDefaults(
    defineProps<{
        isBack?: boolean
        current?:number
    }>(),
    {
        isBack: true,
        current: 0
    }
)
const tabs = reactive([
    {
        name: '消息',
        icon: icon_message,
        icon_on: icon_message_on
    },
    {
        name: '通讯录',
        icon: icon_contacts,
        icon_on: icon_contacts_on
    },
    {
        name: '推广',
        icon: icon_discover,
        icon_on: icon_discover_on
    },
    {
        name: '我',
        icon: icon_mine,
        icon_on: icon_mine_on
    }
])
const tabIndex = ref(0)
watch(() => props.current, (value) => {    
    tabIndex.value = value
}, { immediate: true })
const emit = defineEmits(['change'])
function handleClick(index: number) {
    tabIndex.value = index
    emit('change', index)
}
function setTabIndex(index: number) {
    tabIndex.value = index
}
defineExpose({
    setTabIndex
})


</script>
  
<style lang="scss" scoped>
.tabbar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 110rpx;
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
    position: relative;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    border-top: 1rpx solid #EFEFEF;

    .item {
        font-size: 28rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #999999;

        &.active {
            color: #09C160;
        }

        .name {
            margin-top: 6rpx;
            font-size: 24rpx;
        }
    }
}
</style>
  